<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header">
    <link th:href="@{favicon.ico}" rel="shortcut icon"/>
    <link rel="stylesheet" href="/css/travel.css">
    <link rel="stylesheet" href="/css/iziToast.css">
    <link rel="stylesheet" href="/js/swiper/swiper-bundle.min.css"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/js/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script href="/js/element-ui/lib/index.js"></script>
    <script src="/js/jquery.min.js"></script>


    <script src="/js/swiper/swiper-bundle.min.js"></script>
    <script src="/js/travel.js"></script>
    <script src="/js/iziToast.js"></script>
    <script>
        $(document).ready(function () {

            $('#register-form').submit(function (e) {
                e.preventDefault(); // 阻止表单默认提交行为
                let email = $('#addEmail').val();
                let password = $('#addPassword').val();
                $.ajax({
                    url: '/register', // 后台接口URL
                    type: 'POST',
                    dataTpe: 'json',
                    data: {'email': email, 'password': password},
                    success: function (response) {
                        if (response.code == 0) {

                            iziToast.show(
                                {
                                    title: 'info',
                                    position: 'topCenter',
                                    message: 'Register successful!',
                                    color: 'green',
                                    timeout: 1000,
                                    onClosed: () => {
                                        // location.reload();
                                    }
                                }
                            )

                        } else {
                            iziToast.show(
                                {

                                    title: 'info',
                                    position: 'topCenter',
                                    message: 'Register failure!',
                                    color: 'red',
                                }
                            )
                        }
                    },
                    error: function (xhr, status, error) {
                        iziToast.show(
                            {
                                position: 'topCenter',
                                title: 'info',
                                message: 'Register failure!',
                                color: 'red'
                            }
                        )
                    }
                });
            })


            $('#login-form').submit(function (e) {
                e.preventDefault(); // 阻止表单默认提交行为
                let email = $('#email').val();
                let password = $('#password').val();
                $.ajax({
                    url: '/login', // 后台接口URL
                    type: 'POST',
                    dataTpe: 'json',
                    data: {'email': email, 'password': password},
                    success: function (response) {
                        if (response.code == 0) {

                            iziToast.show(
                                {
                                    title: 'info',
                                    position: 'topCenter',
                                    message: 'Login successful!',
                                    color: 'green',
                                    timeout: 1000,
                                    onClosed: () => {
                                        location.reload();
                                    }
                                }
                            )

                        } else {
                            iziToast.show(
                                {

                                    title: 'info',
                                    position: 'topCenter',
                                    message: 'Login failure!',
                                    color: 'red',
                                }
                            )
                        }
                    },
                    error: function (xhr, status, error) {
                        iziToast.show(
                            {
                                position: 'topCenter',
                                title: 'info',
                                message: 'Login failure!',
                                color: 'red'
                            }
                        )
                    }
                });
            })
            let searchBtn = document.querySelector('#search-btn');
            let searchBar = document.querySelector('.search-bar-container');
            let formBtn = document.querySelector('#login-btn');
            let loginForm = document.querySelector('#login');
            let registerForm = document.querySelector('#register');
            let formClose = document.querySelector('#form-close');
            let formRegisterClose = document.querySelector('#form-register-close');
            let registerNow = document.querySelector('#registerNow');
            let menu = document.querySelector('#menu-bar');
            let navbar = document.querySelector('.navbar');
            let videoBtn = document.querySelectorAll('.vid-btn');

            window.onscroll = () => {
                searchBtn.classList.remove('el-icon-close');
                searchBar.classList.remove('active');
                menu.classList.remove('el-icon-close');
                navbar.classList.remove('active');
                loginForm.classList.remove('active');
            }

            searchBtn.addEventListener('click', () => {
                searchBtn.classList.toggle('el-icon-close');
                searchBar.classList.toggle('active');
            });

            formBtn.addEventListener('click', () => {
                console.log('click')
                loginForm.classList.add('active');
            });

            registerNow.addEventListener('click',()=>{
                loginForm.classList.remove('active');
                formRegisterClose.classList.add('active');
                registerForm.classList.add('active');
            })

            formClose.addEventListener('click', () => {
                loginForm.classList.remove('active');
            });

            formRegisterClose.addEventListener('click', () => {
                registerForm.classList.remove('active');
            });

            videoBtn.forEach(btn => {
                btn.addEventListener('click', () => {
                    document.querySelector('.controls .active').classList.remove('active');
                    btn.classList.add('active');
                    let src = btn.getAttribute('data-src');
                    document.querySelector('#img-slider').src = src;
                });
            });

            var swiper1 = new Swiper(".review-slider", {
                spaceBetween: 10,
                loop: true,
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                },
                breakpoints: {
                    640: {
                        slidesPerView: 1,
                    },
                    768: {
                        slidesPerView: 2,
                    },
                    1024: {
                        slidesPerView: 3,
                    },
                },
            });

            var swiper2 = new Swiper(".brand-slider", {
                spaceBetween: 20,
                loop: true,
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                },
                breakpoints: {
                    450: {
                        slidesPerView: 2,
                    },
                    768: {
                        slidesPerView: 3,
                    },
                    991: {
                        slidesPerView: 4,
                    },
                    1200: {
                        slidesPerView: 5,
                    },
                },
            });
            menu.addEventListener('click', () => {
                menu.classList.toggle('fa-times');
                navbar.classList.toggle('active');
            });
        });

    </script>
</head>